<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Sparkline Test</title>
  <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  
  <link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../jquery-1.3.2.min.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>

  <!-- END: load jqplot -->
  <script type="text/javascript" language="javascript">
  
  $(document).ready(function(){
    
    // Set up simulated data from a live price feed for the past minute where data is coming in at every second.
    var t = 1000; // 1000 ms equals 1 second
    var d = new Date().getTime(); // create a new date at the current time.
    var p = Math.random() * 100;  // create a random price for right now.
    var l = [[d,p]];  // create an array to hold our data, mighty as well put in the current time, price while we're at it.
    
    // loop 59 times to create random data for the past 59 seconds.
    for (var i=1; i<61; i++) {
      l.unshift([d - i*t, Math.random()*100]);
    }
    
    // create a custom ticks array for the 
    var ticks = [];
    for (var i=0; i<7; i++) {
      ticks.unshift(d - i*10*t);
    }
    

    plot = $.jqplot('chart', [l], {  
      axes: { 
        xaxis: { padMin:1.0, padMax: 1.1, tickInterval: "10 seconds", renderer: $.jqplot.DateAxisRenderer, tickOptions:{formatString:"%H:%M:%S"} }, 
        yaxis: { tickOptions:{formatString:"$%.2f"}, min:0, max:100 }
      },
      series:[
        {showMarker:false}
      ]
    });
    
    // window.setInterval(updateData, 1000);
    
  });
    
    function updateData () {
      // remove the first element and add a new one on end
      var d = new Date().getTime();
      var p = Math.random()*100;
      var data = plot.series[0].data;
      data.splice(0,1);
      data.push([d, p]);
      // var min = data[0][0];
      // var max = data[data.length-1][0];
      // var ticks = [];
      // for (var t in plot.axes.xaxis._ticks) {
      //   ticks.push(plot.axes.xaxis._ticks[t].value);
      // };
      // plot.axes.xaxis.min = min;
      // plot.axes.xaxis.max = max;
      // plot.axes.xaxis.tickInterval = null;
      // // for date axes...
      // plot.axes.xaxis.daTickInterval = null;
      // plot.axes.xaxis._ticks = null;
      plot.replot({resetAxes:['xaxis']});
    }
  
  </script>
  </head>
  <body>
<?php include "nav.inc"; ?>
    <div id="chart" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
    <button onclick="timer = window.setInterval(updateData, 1000);">Start</button>
    <button onclick="timer = window.clearInterval(timer);">Stop</button>
  </body>
</html>